<template>
  <div class="search-suggestion">
    <van-cell
      v-for="(item, index) in sugListHighLight"
      :key="index"
      icon="search"
    >
      <div v-html="item" @click="clickKeyWord(index)"></div>
    </van-cell>
  </div>
</template>

<script>
import { getSugList } from "@/api/search.js";
// 导入 lodash 内置的 防抖函数
import { debounce } from "lodash";
export default {
  name: "search-suggestion",
  props: {
    keyword: {
      required: true,
    },
  },
  data() {
    return {
      // 搜索建议关键字列表
      sugList: [],
      // 添加高亮标签的建议关键字列表
      sugListHighLight: [],
    };
  },
  async created() {},
  methods: {
    clickKeyWord(i) {
      // 获取被点击的不带span标签的建议关键字
      let str = this.sugList[i];
      this.$emit("setKeyword", str);
    },
    async getSugList2(k) {
      // 立即查询建议关键字列表
      let { data: resBody } = await getSugList(k);
      // 正则
      const reg = new RegExp(k, "ig");
      // 新字符串
      const newStr = `<span class="highlight">${k}</span>`;
      // 遍历建议列表，将里面的字符串都根据正则替换成新字符串
      // 并装入数组返回给sugListHighLight
      if (resBody.data.options[0] === null) {
        return;
      }
      this.sugList = resBody.data.options;
      this.sugListHighLight = resBody.data.options.map((v) =>
        v.replace(reg, newStr)
      );
    },
  },
  computed: {},
  watch: {
    // 使用对象格式的侦听器侦听同名属性 keyword的值改变
    keyword: {
      // 处理函数：注意，首次加载组件不会执行
      handler: debounce(function (str) {
        console.log("str->", str);
        this.getSugList2(str);
      }, 1000),
      // 强制首次加载时就立即执行本侦听器handler函数
      immediate: true,
    },
  },
  components: {},
};
</script>

<style lang="less" scoped>
/deep/ .highlight {
  color: red;
  font-weight: bolder;
}
</style>